<template>
  <div>
    <button @click="count++">{{ count }}</button>
  </div>
</template>

<script  lang="ts" setup>
import { reactive, ref, toRefs, watchEffect, watchPostEffect, watchSyncEffect } from "vue";

const count = ref(0);
// watchEffect
watchEffect(() => {
  if (count.value > 5) {
    console.log("count大于5了");
  }
});
//
// watchSyncEffect
watchSyncEffect(() => {
  console.log(count.value, "🎈watchSyncEffect");
});
watchPostEffect(() => {
  console.log(count.value, "🤖watchPostEffect");
});
</script>

<style lang="scss" scoped>
</style>
